<template>
  <div class="box">
    <n-card :title="arrToString">
      <ul class="sort-ul">
        <li v-for="(value, key) in arr" :key="value" :data-index="key">
          <div class="li-top">
            <slot name="boundary" :key="key">
              <div v-if="key > boundary" class="complete">✓</div>
            </slot>
            <div
              v-if="sortingArr.indexOf(key) != -1"
              :class="{ sorting: sortingArr.indexOf(key) != -1 }"
            >
              对比
            </div>
          </div>
          <div class="container" :style="'height:' + value * 10 + 'px'">
            <span>{{ value }}</span>
          </div>
          <div class="_index">[{{ key }}]</div>
        </li>
      </ul>
      <template #footer> 比较：{{ sortingArr.length ? showCode : '' }} </template>
      <template #action>
        <n-flex justify="space-between">
          <n-space>
            <n-button type="primary" ghost @click="onSort">排序</n-button>
            <n-button ghost @click="onReset" :disabled="sorting">重置</n-button>
          </n-space>
          <a class="gitee" title="https://gitee.com/loujinliang/vue3-sort" href="https://gitee.com/loujinliang/vue3-sort" target="_blank">
            <img src="@/assets/g_i_t.png" alt="">
          </a>
        </n-flex>
        
      </template>
    </n-card>
  </div>
</template>
<script setup lang="ts">
// import { computed, reactive, ref } from 'vue'
import { NButton, NSpace, NCard, NFlex } from 'naive-ui'

const props = defineProps<{
  arr: number[]
  boundary: number
  arrToString: string
  sortingArr: number[]
  onSort: () => void
  onReset: () => void
  sorting: boolean
  showCode: string
}>()
</script>
<style scoped>
.gitee{
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  img{
    height: 100%;
    width: auto;
  }
}
ul {
  display: flex;
  width: 100%;
  padding-left: 0;
  align-items: flex-end;
  justify-content: space-around;
  list-style: none;
}
li {
  width: 80px;
  height: 100%;
  background-color: #fff4f4;
  margin: 0 1px;
  span {
    color: red;
  }
  .li-top {
    height: 30px;
  }
  .container {
    text-align: center;
  }
  :deep(.complete) {
    background-color: aquamarine;
    color: #1675ff;
    text-align: center;
  }
  .sorting {
    background-color: rgba(255, 0, 0, 0.5);
    text-align: center;
    color: #fff;
  }
  ._index {
    text-align: center;
    border-top: 1px solid #ebebeb;
    color: #b5b5b5;
  }
}
</style>
